<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>联系人</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="mui/css/app.css" />
		<style>
			.layui-tab {
				margin: 0px;
			}
			
			.layui-tab-content {
				padding: 0px;
			}
			
			.mui-table-view-cell {
				/*列高度*/
				padding: 12px 15px 12px 15px;
			}
			
			.layui-tab-title {
				/*底部宽高*/
				width: 100%;
				height: 56px;
			}
			
			.layui-tab-title li {
				line-height: 56px;
			}
			.layui-tab-title .layui-this:after{
				height: 56px;
			}
			.mui-ellipsis {
				padding: 2px 0 0 0;
			}
			/**头像*/
			.layui-tab-content img{
				border-radius: 5px;
			}
			/**灰色*/
			.gray {
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				filter: grayscale(100%);
				filter: gray;
			}
			/**设置*/
			#setting .mui-table-view{
				margin-top: 20px;
			}
			#username{
				line-height: 42px;
			}
		</style>
	</head>

	<body>
		<div class="layui-tab layui-tab-card">
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<div class="mui-content">
						<ul class="mui-table-view" id="userList">
							<!--<li class="mui-table-view-cell mui-media">
								<a href="javascript:;"><img class="mui-media-object mui-pull-left" src="mui/images/cbd.jpg">
									<div class="mui-media-body" id="10000" name="管理员">花甲
										<p class="mui-ellipsis">最近聊天...</p>
									</div>
								</a>
							</li>-->
						</ul>
					</div>
				</div>
				<div class="layui-tab-item">
					<div class="mui-content">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">待续...</li>
						</ul>
					</div>
				</div>
				<div class="layui-tab-item">
					<div class="mui-content" id="setting">
						<ul class="mui-table-view" style="margin: 0px;">
							<li class="mui-table-view-cell mui-media" id="user">
								<a href="javascript:;" class="mui-navigate-right">
									<img class="mui-media-object mui-pull-left" src="" id="userImg">
									<div class="" id="username"></div>
								</a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									修改账号 
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									修改密码
								</a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									新消息提醒
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									隐私
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									通用
								</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="javascript:;" class="mui-navigate-right">关于socket <i class="mui-pull-right update">V2.0.1</i></a>
							</li>
						</ul>
						<ul class="mui-table-view exit">
							<li class="mui-table-view-cell" style="text-align: center;">
								<a href="login.html">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<ul class="layui-tab-title" style="position: fixed;bottom: 0;">
				<li class="layui-this layui-icon layui-icon-reply-fill" style="width: 34%">联系人</li>
				<li class="layui-icon layui-icon-group" style="width: 33%">通讯录</li>
				<li class="layui-icon layui-icon-set-fill" style="width: 34%">设置</li>
			</ul>
		</div>
		<script type="text/javascript" src="static/js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="layer/layer.js"></script>
		<script type="text/javascript" src="static/js/getparam.js"></script>
		<script type="text/javascript" src="static/index.js"></script>
		<script src="layui/layui.js" charset="utf-8"></script>
		<script>
			//初始化tab页
			var from = sessionStorage.getItem("from");
			if(from != null && from != undefined && from == 'uptInfo'){
				sessionStorage.removeItem('from');
				console.log("来自修改页" + from);
				
				$(".layui-tab-content .layui-tab-item:first-child").removeClass("layui-show");
				$(".layui-tab-content .layui-tab-item:last-child").addClass("layui-show");
				
				$(".layui-tab-title li:first-child").removeClass("layui-this");
				$(".layui-tab-title li:last-child").addClass("layui-this");
			}
			
			
			layui.use('element', function() {
				var $ = layui.jquery,
					element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

				//触发事件
				var active = {
					tabAdd: function() {
						//新增一个Tab项
						element.tabAdd('demo', {
							title: '新选项' + (Math.random() * 1000 | 0) //用于演示
								,
							content: '内容' + (Math.random() * 1000 | 0),
							id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
						})
					},
					tabDelete: function(othis) {
						//删除指定Tab项
						element.tabDelete('demo', '44'); //删除：“商品管理”

						othis.addClass('layui-btn-disabled');
					},
					tabChange: function() {
						//切换到指定Tab项
						element.tabChange('demo', '22'); //切换到：用户管理
						console.log(123)
					}
				};

				$('.site-demo-active').on('click', function() {
					var othis = $(this),
						type = othis.data('type');
					active[type] ? active[type].call(this, othis) : '';
				});

				//Hash地址的定位
				var layid = location.hash.replace(/^#test=/, '');
				element.tabChange('test', layid);

				element.on('tab(test)', function(elem) {
					location.hash = 'test=' + $(this).attr('lay-id');
				});
			});
			
			$("#user").click(function(){
				window.location.href = 'uptInfo.html?type=user';
			})
			
			$('.layui-icon-reply-fill').click(function(){
				$("title").text("联系人")
			})
			$('.layui-icon-group').click(function(){
				$("title").text("通讯录")
			})
			$('.layui-icon-set-fill').click(function(){
				$("title").text("设置")
			})
		</script>

	</body>

</html>